<template>
  <div class="pop-up">
    <pop-up-title>
      <template v-slot:left>
        <span class="icon">
          <i class="iconfont iconcp_fanli" style="color: #fff"></i>
        </span>
      </template>
      <template v-slot:center>
        <div style="color: #fff">
          链接详情
        </div>
      </template>
      <template v-slot:right>
        <span class="icon" @click="hidePopup">
          <i class="iconfont iconty_guanbi" style="color: #e02828; font-size: 20px"></i>
        </span>
      </template>
    </pop-up-title>
    <div class="pop-up-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import PopUpTitle from './pop-up-title'
export default {
  components: {
    PopUpTitle,
  },
  methods: {
    hidePopup() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="stylus" scoped>
 @import '~@/assets/styles/variables.styl'
  .pop-up-title 
    width 100% 
    height 48px 
    display flex 
    box-sizing border-box 
    padding 0 15px
    justify-content space-between
    background $color-theme-dark
  .pop-up-content 
    display flex 
    box-sizing border-box 
    padding 0 20px
    padding-top 20px
    .left-part 
      width 210px 
      margin-right 20px
      .list 
        border-radius 3px 
        border 1px solid $color-divide-line
        margin-bottom 10px
        .refund-amount 
          color $color-theme-red 
    .right-part 
      width 310px
</style>